<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>FrozenUI Demo</title>
        <link rel="stylesheet" href="css/frozen.css">
        <link rel="stylesheet" type="text/css" href="assets/css/style.css">
        <link rel="stylesheet" type="text/css" href="assets/css/detail.css">
    </head>
    <body ontouchstart="">

        <!--footer-->
        <footer class="ui-footer ui-footer-btn my-goods-detail-footer">
            <ul class="ui-tiled">
                <li class="view-base-car">
                    <div class="view-base">
                        <p></p>
                        <span>基地</span>
                    </div>
                    <div class="cat-item">
                        <p><span class="badge">12</span></p>
                        <span>购物车</span>
                    </div>
                </li>
                <li class="buy-btn">
                    <div>加入购物车</div>
                </li>
            </ul>
        </footer>
        <!--endfooter-->

        <section>
            <div class="ui-flex ui-flex-pack-start my-detail-banner">
                <div>
                    <img src="http://placeholder.qiniudn.com/640x360" alt="">
                </div>
            </div>
            <div class="my-detail-goods-title">
                <div class="ui-row-flex ui-whitespace my-border-b">
                    <div class="ui-col ui-col-4">
                        <h2 class="my-detail-goods-name">卧龙农业种植基地</h2>
                        <p class="goods-stars">
                            <img src="assets/img/stars.png" alt="">
                            <img src="assets/img/stars.png" alt="">
                            <img src="assets/img/stars.png" alt="">
                            <img src="assets/img/stars.png" alt="">
                        </p>
                    </div>
                    <div class="ui-col">
                        <strong class="goods-price">￥100.00</strong>
                    </div>
                </div>
                <div class="ui-row-flex ui-whitespace my-goods-property">
                    <div class="ui-col ui-col-1 right">农场发货、正品保障</div>
                    <div class="ui-col ui-col-1 eye">全程直播，生态、健康</div>
                </div>
            </div>

            <div class="ui-row-flex ui-whitespace my-liucheng">
                <div class="ui-col ui-col my-step1">
                    <span class="next"></span>
                    <p><img src="assets/img/step1.png" alt=""></p>
                    <span>用户下单</span>
                </div>
                <div class="ui-col ui-col my-step2">
                    <span class="next"></span>
                    <p><img src="assets/img/step2.png" alt=""></p>
                    <span>商家发货</span>
                </div>
                <div class="ui-col ui-col my-step3">
                    <p><img src="assets/img/step3.png" alt=""></p>
                    <span>物流配送</span>
                    <span class="next"></span>
                </div>
                <div class="ui-col ui-col my-step4">
                    <p><img src="assets/img/step4.png" alt=""></p>
                    <span>买家收货</span>
                </div>
            </div>

            <!--content-->
            <div class="content">
                <h3 class="title ui-border-b ui-txt-muted">商品详情</h3>
                <div>
                    content
                </div>
            </div>
            <!--end content -->

            <div class="my-related">
                <div class="title ui-border-b">
                    <h5>相关产品</h5>
                </div>
                <div class="body">
                    <ul class="ui-grid-halve my-grid-halve">
                        <li>
                            <a href="###" class="ui-txt-default">
                                <div class="my-replated-img">
                                    <img src="http://placeholder.qiniudn.com/200x200" alt="">
                                </div>
                                <div class="my-related-goods-info">
                                    <h4>这本书太赞了，每次看都有不一样的体会和感悟，超级</h4>
                                    <p class="ui-border-t"><strong>￥100.00</strong><span class="rf ui-txt-muted">库存 1000 件</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="###" class="ui-txt-default">
                                <div class="my-replated-img">
                                    <img src="http://placeholder.qiniudn.com/200x200" alt="">
                                </div>
                                <div class="my-related-goods-info">
                                    <h4 class="ui-border-b">这本书太赞了，每次看都有不一样的体会和感悟，超级</h4>
                                    <p><strong>￥100.00</strong><span class="rf ui-txt-muted">库存 1000 件</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="###" class="ui-txt-default">
                                <div class="my-replated-img">
                                    <img src="http://placeholder.qiniudn.com/200x200" alt="">
                                </div>
                                <div class="my-related-goods-info">
                                    <h4 class="ui-border-b">这本书太赞了，每次看都有不一样的体会和感悟，超级</h4>
                                    <p><strong>￥100.00</strong><span class="rf ui-txt-muted">库存 1000 件</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="###" class="ui-txt-default">
                                <div class="my-replated-img">
                                    <img src="http://placeholder.qiniudn.com/200x200" alt="">
                                </div>
                                <div class="my-related-goods-info">
                                    <h4 class="ui-border-b">这本书太赞了，每次看都有不一样的体会和感悟，超级</h4>
                                    <p><strong>￥100.00</strong><span class="rf ui-txt-muted">库存 1000 件</span></p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!--
        <div class="footer-hidden">
            <div class="panel-show">
                <div class="alert-header ui-border-b">
                    <div class="alert-head-thumb">
                        <img src="http://placeholder.qiniudn.com/200x200" alt="">
                    </div>
                    <i class="ui-icon-close-page"></i>
                    <div>
                        <strong>￥100.00</strong>
                    </div>
                    <p>商品规格: 1箱 = 0.125KG</p>
                </div>
                <ul class="ui-row ui-whitespace alert-body">
                    <li class="ui-col ui-col-50">
                        购买数量: <span class="ui-txt-muted goods-number">共<i>1</i>件</span>
                    </li>
                    <li class="ui-col ui-col-50">
                        <div class="num rf">
                            <button type="button">-</button>
                            <span>1</span>
                            <button type="button">+</button>
                        </div>
                    </li>
                </ul>
                <ul class="ui-row alert-footer">
                    <li class="ui-col ui-col-50 add-to-car">加入购物车</li>
                    <li class="ui-col ui-col-50 buy-now">立即购买</li>
                </ul>
            </div>
        </div>
        -->

        <script src="lib/zepto.min.js"></script>
        <script src="js/frozen.js"></script>
    </body>
</html>
